<template>
  <el-dialog draggable v-model="dialog.show" width="600px" :before-close="handleClose" class="custom-dialog">
    <template #header> 编辑规格 </template>
    <el-form :model="forms" ref="registerRef" :rules="rules" label-width="100">
      <el-form-item label="名称" prop="label">
        <el-input v-model="forms.label" placeholder="规格名称" clearable class="width-220"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="specType">
        <el-select v-model="forms.specType" placeholder="选择类型" @change="onTypeChange" class="width-220">
          <el-option v-for="item in specOptions" :key="item.id" :label="item.label" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <!-- 单行 多行文本 -->
      <el-form-item label="默认值" prop="defaultValue" v-if="[1, 2, 5].includes(forms.specType)">
        <el-input v-model="forms.defaultValue" placeholder="默认值" clearable :type="forms.specType === 2 ? 'textarea' : ''"></el-input>
      </el-form-item>
      <template v-if="[3, 4].includes(forms.specType)">
        <!-- 单选 多选 -->
        <el-form-item label="关联字段" prop="selectType">
          <el-select v-model="forms.selectType" placeholder="选择类型">
            <el-option v-for="item in selectOptions" :key="item.id" :label="item.label" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <!--- 单行 多行选择自定义 --->
        <el-form-item label="下拉备选" prop="selectValue" v-if="forms.selectType === 1">
          <el-input v-model="forms.selectValue" type="textarea" placeholder="每个选项请用回车分开" clearable></el-input>
        </el-form-item>
      </template>
      <!--- 数值  --->
      <template v-if="forms.specType === 5">
        <el-form-item label="小数精度" prop="pointLength">
          <el-input-number v-model.number="forms.pointLength" :min="0" :max="10" placeholder="默认值" clearable></el-input-number>
        </el-form-item>
      </template>
      <!--- 选择日期  --->
      <template v-if="forms.specType === 6">
        <el-form-item label="默认值" prop="pointLength">
          <el-date-picker v-model="forms.defaultValue" placeholder="选择日期时间" value-format="YYYY-MM-DD"> </el-date-picker>
        </el-form-item>
      </template>

      <!--- 计算公式  --->
      <template v-if="forms.specType === 7">
        <el-form-item label="填写公式" prop="pointLength">
          <calculator />
        </el-form-item>
      </template>

      <el-form-item label="是否启用" prop="isEnable">
        <el-switch v-model="forms.isEnable" :active-value="true" :inactive-value="false" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949">
        </el-switch>
      </el-form-item>

      <el-form-item label="是否必填" prop="isRequired">
        <el-switch
          v-model="forms.isRequired"
          :active-value="true"
          :inactive-value="false"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model="forms.note" type="textarea" placeholder="备注" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <z-button type="" @click="handleClose" icon="close">取消</z-button>
        <z-button icon="check" @click="onCheck" :loading="dialog.loading"> 确认 </z-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { specOptions, selectOptions } from '@/config/data';
import calculator from './calculator.vue';
import { post } from '@/api/index.js';
import { reactive } from 'vue';
let emit = defineEmits(['update:modelValue', 'onSave']);
const $message = inject('$message');
let props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  depOptions: {
    type: Array,
    default: () => {
      return [];
    }
  },
  editData: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

let registerRef = ref();
let dialog = reactive({
  show: false,
  loading: false
});
let formsInit = () => {
  return reactive({
    id: 0,
    label: '',
    name: '',
    specType: undefined,
    equationLabel: '',
    equationName: '',
    pointLength: 0,
    isRequired: true,
    isEnable: true,
    defaultValue: '',
    selectType: undefined,
    selectValue: '',
    note: '',
    idSorted: 0,
    selectValues: []
  });
};
let forms = formsInit();
// 单选 多选 关联字段判断验证
const validateType = (rule, value, callback) => {
  if ([3, 4].includes(forms.specType)) {
    if (!value) callback(new Error('类型为单选、多选时。必须选择关联字段!'));
    callback();
  }
  callback();
};
const validateValue = (rule, value, callback) => {
  if ([3, 4].includes(forms.specType)) {
    if (forms.selectType === 1) {
      if (!value) callback(new Error('关联字段为自定义时,下拉备选必须要有值!'));
      callback();
    }
    callback();
  }
  callback();
};
let rules = {
  label: [{ required: true, trigger: 'blur', message: '名称不能为空!' }],
  specType: [{ required: true, trigger: 'blur', message: '请选择规格类型!' }],
  selectType: [{ required: true, validator: validateType, trigger: 'blur' }],
  selectValue: [{ required: true, validator: validateValue, trigger: 'blur' }]
};
watch(
  () => props.modelValue,
  val => {
    dialog.show = val;
    if (!val) return;
    let formData = formsInit();
    Object.keys(formData).map(r => {
      forms[r] = props.editData[r] != undefined ? props.editData[r] : formData[r];
    });
  },
  {
    immediate: true
  }
);

const handleClose = () => {
  emit('update:modelValue', false);
};
const onCheck = () => {
  if (!registerRef.value) return;
  registerRef.value.validate(async val => {
    if (!val) return;
    try {
      dialog.loading = true;
      await post('CustomProductSpec/CreateOrUpdate', forms);
      $message.success('编辑成功');
      dialog.loading = false;
      emit('onSave');
      registerRef.value.resetFields();
    } catch (error) {
      console.log('CustomProductSpec/CreateOrUpdate 错误', error);
      dialog.loading = false;
    }
  });
};
// 规格类型切换
const onTypeChange = val => {
  forms.defaultValue = specOptions[val - 1].dataType;
  if (val === 5) {
    forms.pointLength = 0;
  }
};
</script>

<style lang="scss" scoped></style>
